import React from 'react'; 
import { Tooltip } from 'antd';   
import {  ExclamationCircleOutlined,CheckOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';  
  
const LeftItem = ({ inciCN, percentage, index,error, subclass, warning , isActive, onClick }) => {  
  const itemStyle = {  
    display: 'flex',  
    alignItems: 'center',  
    cursor: 'pointer',  
    color: isActive ? 'blue' : 'inherit',  
    backgroundColor: isActive ? 'lightgray' : 'inherit',  
  };  
  
  const hoverStyle = {  
    color: 'blue',  
    backgroundColor: 'lightgray',  
    transition: 'all 0.3s ease',  
  };  
  
  const renderIcons = () => {  
    const icons = [];  

  
    // 蓝色信息标识（表示可选细分类浓度）  
    if (subclass !== null) {  
      icons.push(  
        <Tooltip title="可以选细分类浓度">  
          <InfoCircleOutlined style={{ color: 'blue',paddingRight:'5px' }} />  
        </Tooltip>  
      );  
    }  

    // 绿色勾选标识（表示没有错误或警告）  
    if (!error && !warning) {  
        icons.push(<CheckOutlined style={{ color: '#2D8934',paddingRight:'5px' }} />);  
        }  
  
    // 红色警告标识（显示错误内容）  
    if (error !== null) {  
      icons.push(  
        <Tooltip title={error}>  
          <ExclamationCircleOutlined style={{ color: '#EB2443',paddingRight:'5px' }} />  
        </Tooltip>  
      );  
    }  
  
    // 橙色警告标识（假设warning字段用于表示其他类型的警告信息）  
    if (warning !== null && warning !== undefined && warning !== '') {  
      icons.push(  
        <Tooltip title={warning}>  
          <WarningOutlined style={{ color: 'orange',paddingRight:'5px' }} />  
        </Tooltip>  
      );  
    }  
  
    return icons;  
  };  
  
  return (  
    <div  
      style={{  
        display: 'flex',  
        alignItems: 'center',  
        cursor: 'pointer',  
        ...itemStyle,  
        paddingLeft:'10px',
        lineHeight:'25px',
        marginBottom:'5px'
      }}  
      onClick={() => onClick(index)}  
    >  
      <div style={{ display: 'flex', flexDirection: 'column' }}>  
        <div>{inciCN}</div>  
        <div>{percentage}</div>  
      </div>  
      <div style={{ display: 'flex', alignItems: 'center', marginLeft: 'auto' }}>  
        {renderIcons()}  
      </div>  
    </div>  
  );  
};  
  
export default LeftItem;